<template>
	<div style="height: 100%">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<component-style :curComponent="curComponent"></component-style>
			</a-tab-pane>
			<a-tab-pane key="dataSources" :tab="i18n('componentStyle.data','数据')">
				<a-form layout="vertical" style="padding-right: 20px;height: 100%">
					<div style="display: flex;flex-direction: column;height: 100%;overflow: auto">
						<div>
							<a-form-item :label="textI18n('dataSource','数据来源')">
								<a-radio-group v-model:value="config.dataSources.source" @change="sourceChange">
									<a-radio value="static">{{textI18n('staticText','静态文本')}}</a-radio>
									<a-radio value="dynamic">{{textI18n('dynamic','动态文本')}}</a-radio>
								</a-radio-group>
							</a-form-item>
							<a-form-item :label="quillEditorI18n('textContent','富文本内容')" v-if="config.dataSources.source=='static'">
								<a-button style="width: 100%" type="primary" @click="setContent">{{quillEditorI18n('textEditing','富文本编辑')}}</a-button>
							</a-form-item>
							<a-form v-else layout="vertical" style="height: 100%">
								<a-form-item :label="textI18n('textContent','文本内容字段')">
									<a-button style="width: 100%" type="primary" @click="setContent">{{quillEditorI18n('textEditing','富文本编辑')}}</a-button>
								</a-form-item>
							</a-form>
						</div>
						<div style="flex: 1;overflow: auto">
							<dynamic-data-setting
								:config="config"
								:dataModel="dataModel"
								:modelConfig="modelConfig"
								:getDataModel="getDataModel"
							></dynamic-data-setting>
						</div>
					</div>
				</a-form>
			</a-tab-pane>
			<a-tab-pane key="advancedConf" :tab="i18n('componentStyle.advanced','高级')"  v-if="config.dataSources.source=='dynamic'">
				<a-form layout="vertical">
					<!--刷新配置-->
					<refresh-config></refresh-config>
				</a-form>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/**
 * 富文本
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import QuillEditorDialog from "@/views/modules/design/dialog/quill-editor-dialog.vue";
import {Util} from "@lowcode/jpaas-base-lib"
import DynamicDataSetting from "@/views/modules/design/right-component/common/dynamic-data-setting.vue";
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue";
export default {
	name: "QuillEditorDef",
	mixins:[ComponentDef],
	components:{
		DynamicDataSetting,
        RefreshConfig
	},
	data() {
		return {}
	},
	created() {
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		textI18n(name,text,key){
			return this.$ti18(name,text,"textLang",key);
		},
		quillEditorI18n(name,text,key){
			return this.$ti18(name,text,"quillEditorLang",key);
		},
		//设置富文本内容
		setContent(){
			let self = this;
			let conf = {
				curVm: this,
				component: QuillEditorDialog,
				title: this.quillEditorI18n('textContent','富文本内容'),
				widthHeight: ['1200px', '700px'],
                zIndex:999,
				data: {
					content:self.config.dataSources.content,
					measures:self.config.dataSources.measures,
					source:self.config.dataSources.source
				}
			};
			Util.open(conf, function (action, data) {
				if (action != 'ok') return;
                self.config.dataSources["content"]=data;
			});
		},
		sourceChange(e){
			if(e.target.value=="static" && this.config.advancedConf){
                this.config.advancedConf.refreshConfig["isRefresh"]=false;
			}
		}
	},
	watch: {}
}
</script>

<style scoped>
</style>
